<template>
	<view class="main">
		<view class="head">
			<view class="avatar-area">
				<view class="avatar" @tap="tocenter"><image src="../../static/icons/user.jpg" v-show="isShow"></image></view>
				<view class="user" v-if="mark">
					<view>Hi~</view>
					<view>您还未登录</view>
				</view>
				
				<view class="user" v-else>
					<view v-model="nickname" class="nickname">{{nickname}}</view>
					<view v-model="username" class="username">用户名：{{username}}</view>
				</view>
			</view>	
		</view>
		<view class="btns" v-show="btnflag">
			<button @tap="toregister">注册</button>
			<button @tap="tologin">登录</button>
		</view>
		<view class="myorder">
			<view class="top">我的订单</view>
			<view class="navs">
				<!-- 订单状态: 0 待付款; 1 已付款 ; 2 已发货; 3: 已收货; 9 申请退款 -->
				<navigator url="./order/order?type=0" class="nav-item">
					<image src="../../static/icons/icon-pay.png"></image>
					<view class="txt">待付款</view>
				</navigator>
				<navigator url="./order/order?type=1" class="nav-item">
					<image src="../../static/icons/pay-done.png"></image>
					<view class="txt">已付款</view>
				</navigator>
				<navigator url="./order/order?type=2" class="nav-item">
					<image src="../../static/icons/icon-car.png"></image>
					<view class="txt">已发货</view>
				</navigator>
				<navigator url="./order/order?type=3" class="nav-item">
					<image src="../../static/icons/icon-done.png"></image>
					<view class="txt">已收货</view>
				</navigator>
				<navigator url="./order/order?type=9" class="nav-item">
					<image src="../../static/icons/icon-back.png"></image>
					<view class="txt">售后</view>
				</navigator>
			</view>
		</view>
		<view class="box">
			<view class="per">
				<view class="item">
					<image src="../../static/icons/save.png"></image>
					<view class="txt">收藏</view>
				</view>
			</view>
			<view class="per">
				<view class="item">
					<image src="../../static/icons/brand.png"></image>
					<view class="txt">品牌</view>
				</view>
			</view>
			<view class="per">
				<view class="item">
					<image src="../../static/icons/article.png"></image>
					<view class="txt">文章</view>
				</view>
			</view>
			<view class="per">
				<view class="item" @tap="toAddress">
					<image src="../../static/icons/address.png"></image>
					<view class="txt">地址</view>
				</view>
			</view>
			<view class="per">
				<view class="item">
					<image src="../../static/icons/card.png"></image>
					<view class="txt">卡包</view>
				</view>
			</view>
			<navigator url="./cart/cart" class="per">
				<view class="item" @tap="tocart">
					<image src="../../static/icons/cart2.png"></image>
					<view class="txt">购物车</view>
				</view>
			</navigator>
			<view class="per">
				<view class="item">
					<image src="../../static/icons/kf.png"></image>
					<view class="txt">客服</view>
				</view>
			</view>
			<view class="per"></view>
			<view class="per"></view>
		</view>
		<uni-modal v-show="flag">
			<view class="uni-mask"></view>
			<view class="uni-modal">
				<view class="uni-modal__hd">
					<view class="title">未登陆</view>
				</view>
				<view class="uni-modal__bd">您未登陆，需登陆后才能查看</view>
				<view class="bottom">
					<view class="cancle" @tap="cancle">取消</view>
					<view class="OK" @tap="sure">确认</view>
				</view>
			</view>
		</uni-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:false,
				mark:true,
				flag:false,
				btnflag:true,
				username:'',
				nickname:'',
				userInfo:'',	
			};
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('userData');
			    if (value) {
			        // console.log(JSON.parse(value));
					var info = JSON.parse(value)
					this.userInfo = JSON.stringify(info)
					this.flag = false
					this.mark = false
					this.isShow = true
					this.btnflag = false
					this.username = info.username
					this.nickname = info.nickname
			    } else{
					this.flag = true
					this.mark = true
					this.btnflag = true
					this.isShow = false
				}
			} catch (e) {
			    // error
			}
			
		},
		onLoad(option){
			
		},
		methods:{
			toAddress(){
				uni.navigateTo({
				    url: '/pages/mine/address/add'
				});	
			},
			tocenter(){
				// console.log(this.userInfo)
				uni.navigateTo({
				    url: `/pages/mine/login/center?data=${this.userInfo}`
				});
			},
			tocart(){
				
			},
			cancle(){
				this.flag = false
			},
			sure(){
				uni.navigateTo({
				    url: '/pages/mine/login/login'
				});
			},
			tologin(){
				uni.navigateTo({
				    url: '/pages/mine/login/login'
				});
			},
			toregister(){
				uni.navigateTo({
				    url: '/pages/mine/login/register'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.main{
	box-sizing: border-box;
	padding: 0 20px;
	uni-modal{
	    position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 999;
	    display: block;
	    box-sizing: border-box;
		.uni-mask{
		    position: fixed;
		    z-index: 999;
		    top: 0;
		    right: 0;
		    left: 0;
		    bottom: 0;
		    background: rgba(0,0,0,.6);	
		}
		 .uni-modal{
		    position: fixed;
		    z-index: 999;
		    width: 80%;
		    max-width: 300px;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    background-color: #fff;
		    border-radius: 3px;
		    overflow: hidden;
			.uni-modal__hd{
				padding: 1em 1.6em .3em;
				box-sizing: border-box;
				margin: 0;
				.title{
				    font-weight: 400;
				    font-size: 18px;
				    overflow: hidden;
					text-align: center;
				}
			}
			.uni-modal__bd{
				padding: 1.3em 1.6em 1.3em;
			    min-height: 40px;
			    font-size: 15px;
			    line-height: 1.4;
			    color: #999;
			    max-height: 400px;
			    overflow-y: auto;
				text-align: center;
			}
			.bottom{
				width: 100%;
			   position: relative;
			   line-height: 48px;
			   font-size: 18px;
			   display: flex;
			   box-sizing: border-box;
			   text-align: center;
			   .cancle{
				   width: 50%;
				   text-align: center;
			       text-decoration: none;
			       position: relative;
				}
			   .OK{
				   width: 50%;
				   text-align: center;
			       color: #3cc51f;
			   }
			}
			
		 }
	}	
	.head{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 75px;
		margin-top: 30px;
		.avatar-area{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 189px;
			height: 75px;
			.avatar{
				width: 75px;
				height: 75px;
				border-radius: 50%;
				overflow: hidden;
				background-color: #C8C7CC;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.user{
				display: flex;
				margin-left: 16px;
				height: 75px;
				color: #3D4C46;
				font-size: 14px;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				padding: 7px 0;
				view{	
					color: #3D4C46;
					font-size: 14px;
				}
				.nickname{
					font-weight: 700;
					font-size: 16px;
				}
				.username{
					font-size: 12px;
				}
			}
		}
	}
	.btns{
	    margin: 20px auto;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		button{
			width: 91px;
		    height: 38px;
		    box-sizing: border-box;
		    border: 1px solid #354E44;
		    color: #354E44;
		    font-size: 15px;
		    text-align: center;
		    line-height: 38px;
		    border-radius: 5px;
		    margin: 0 15px;
			&:nth-child(2){
				background-color: #354E44;
				color: #fff;
			}
		}
	}
	.myorder{
	    width: 335px;
	    height: 104px;
	    border-radius: 2px;
	    background-color: #fff;
	    margin-top: 30px;
		.top{
		    height: 38px;
		    font-size: 13px;
		    line-height: 38px;
		    border-bottom: 1px solid #ddd;
		    box-sizing: border-box;
		    margin: 0 27px;
			color: #333333;
		}
		.navs{
		    padding: 0 27px;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    text-align: center;
			.nav-item{
				width: 39px;
				height: 52px;
				image{
					width: 20px;
				    height: 20px;
				    margin-top: 10px;
					display: inline-block;
					overflow: hidden;
					position: relative;
				}
				.txt{
				    font-size: 13px;
				    line-height: 18px;
				    text-align: center;
				}
				
			}
		}
	}
	.box{
		width: 335px;
		height: 333px;
	    display: flex;
		justify-content: space-evenly;
	    flex-direction: row;
	    flex-wrap: wrap;
		background-color: #fff;
		margin-top: 30px;
		border-radius: 10px;
		.per{
		    width: 111px;
		    height: 111px;
			&:nth-last-child(1){
				height: 0;
			}
			&:nth-last-child(2){
				height: 0;
			}
			.item{
				width: 111px;
				height: 76px;
				image{
					display: block;
				    width: 25px;
				    height: 25px;
				    margin: 15px auto;
				}
				.txt{
					font-size: 13px;
					line-height: 19px;
					text-align: center;
				}
			}
		}
	}
}
</style>
